<%--
  Created by IntelliJ IDEA.
  User: liye
  Date: 2022/2/17
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>登录页面</title>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <form class="bg-info" style="width: 50%; margin: 100px auto; padding: 20px; border-radius: 10px;" method="post" action="/login">
            <h2 class="text-center text-primary">从这里登录${appName}</h2>
            <div class="form-group">
                <input class="form-control" type="text" name="username" value="${param.username}" placeholder="输入用户名/手机号码">
            </div>
            <div class="form-group">
                <input class="form-control" type="password" name="password" value="${password}" placeholder="输入密码">
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="submit">登录</button>
                <button id="btn-ajax" class="btn btn-success" type="button">AJAX登录</button>
            </div>

        </form>

        <%--<div class="alert copy">
            <button class="close" data-dismiss="alert">&times;</button>
            <strong></strong>
        </div>--%>
    </div>

    <script type="text/javascript">
        //首先给登录按钮绑定一个点击事件
        $("button#btn-ajax").click(function() {
            // alert("登录中...")
            //分别取得用户名及密码
            var username = $("input[name=username]").val();
            var password = $("input[name=password]").val();
            //向服务器发送一个ajax请求
            $.post(
                "login",//请求的路径
                {"username":username, "password":password},
                function(data) {
                    if (data.status=="success") {//账号和密码正确
                        $(".alert").alert('close');
                        $("form").append("<div class='alert alert-success'><button class='close' data-dismiss='alert'>&times;</button> </div>");

                        $(".alert").append("<strong>登录成功！</strong>");

                        window.setTimeout(function () {
                            //停留2s后自动跳转到首页
                            location.href = "/home";
                        }, 2000);
                    }
                    else{//账号或密码不正确
                        $(".alert").alert('close');
                        $("form").append("<div class='alert alert-warning'><button class='close' data-dismiss='alert'>&times;</button> </div>");

                        $(".alert").append("<strong>" + data.msg + "</strong>");
                    }

                },
                "json"
            );
        });

    </script>


</body>
</html>
